<template>
  <div class="details">
    <div class="headline">推广信息</div>

    <div class="matter">
      <div class="top">
        <div class="list" v-for="(item, index) in 7" :key="index">
          <div class="key">
            {{
              index == 0
                ? "推广平台"
                : index == 1
                ? "推广人"
                : index == 2
                ? "推广店铺ID"
                : index == 3
                ? "审核状态"
                : index == 4
                ? ""
                : index == 5
                ? ""
                : index == 6
                ? ""
                : ""
            }}:
          </div>
          <div class="value">
            {{
             
            }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { promotionListId } from "@/api/promotion";

export default {
  data() {
    return {
      id: "",
      detailsObj: {},
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.promotionListIdMet();
  },
  methods: {
    //--------
    promotionListIdMet() {
      let params = this.id;

      promotionListId(params).then((res) => {
        if (res.errorCode == null) {
          this.detailsObj = res.resultData;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.details {
  .headline {
    height: 40px;
    padding: 0 20px;
    box-sizing: border-box;
    background: #eef5fd;
    border-radius: 5px;
    display: flex;
    align-items: center;
  }

  .matter {
    margin-top: 20px;
    .top,
    .center,
    .bottom {
      display: flex;
      flex-wrap: wrap;

      .list {
        width: calc((100% / 4));
        margin-bottom: 10px;
        display: flex;
        align-items: center;

        .value {
          margin-left: 10px;
        }
      }
    }

    .center {
      .list {
        width: 100%;
      }
    }

    .bottom {
      .list {
        width: 100%;
        align-items: baseline;

        .value {
          .block {
            margin-bottom: 10px;

            .title {
              font-weight: 600;
              margin-bottom: 10px;
            }

            .imgs {
              width: 50px;
              height: 50px;
              border: 1px solid;
            }
          }
        }
      }
    }

    .overview {
      .list {
        .key {
          margin-bottom: 10px;
        }

        .value {
          .block {
            margin-bottom: 20px;
            .title {
              font-weight: 600;
              margin-bottom: 10px;
            }

            .text {
              font-size: 400;
              color: rgba(0, 0, 0, 0.6);
            }
          }
        }
      }
    }
  }
}
</style>